<template>
    <div class="statistics-region-one">
        <el-row :gutter="24">
            <el-col :span="12">
                <div class="statistics-items">
                    <div class="icon-header">
                        <el-icon :size="24">
                            <User/>
                        </el-icon>
                    </div>
                    <div class="footer">
                        <span class="title-text">当日履职总数</span>
                        <span class="title-number">{{ statisticsData.SendPoliceDay }}</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="statistics-items">
                    <div class="icon-header">
                        <el-icon :size="24">
                            <VideoCamera/>
                        </el-icon>
                    </div>
                    <div class="footer">
                        <span class="title-text">视频接入总数</span>
                        <span class="title-number">{{ statisticsData.videoCount }}</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="statistics-items">
                    <div class="icon-header">
                        <el-icon :size="24">
                            <User/>
                        </el-icon>
                    </div>
                    <div class="footer">
                        <span class="title-text">年度履职总数</span>
                        <span class="title-number">{{ statisticsData.SendPoliceYear }}</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="statistics-items">
                    <div class="icon-header">
                        <el-icon :size="24">
                            <VideoCamera/>
                        </el-icon>
                    </div>
                    <div class="footer">
                        <span class="title-text">年度巡查总数</span>
                        <span class="title-number">{{ statisticsData.xcMainCount }}</span>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import {getStatisticsData} from "@/api/Dashboard/StatisticsRegion.js";

const statisticsData = ref({})
const getData = async () => {
    const res = await getStatisticsData()
    statisticsData.value = res.data
}

onMounted(() => {
    getData()
})
</script>

<style scoped lang="scss">
.statistics-items {
    display: flex;
    flex-direction: row;
    align-items: flex-end;

    .icon-header {
        margin-right: 10px;
    }

    .footer {
        display: flex;
        //gap: .25rem;
        align-items: flex-end;

        .title-number {
            font-size: 20px;
            line-height: 28px;
            font-weight: 600;
        }

        .title-text {
            font-size: 12px;
            line-height: 20px;
            font-weight: 400;
            margin-right: 10px;
        }
    }
}
</style>